<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScribeHow - Step Recorder</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="popup-container">
    <!-- 头部 -->
    <div class="popup-header">
      <div class="logo">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <path d="M9 12h6M9 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <h1>ScribeHow</h1>
      </div>
      <button class="icon-btn" id="settingsBtn" title="Settings">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" stroke="currentColor" stroke-width="1.5"/>
          <path d="M10 4V2m0 16v-2m6-6h2M2 10h2m11.657-5.657L17.07 2.93M2.93 17.07l1.414-1.414m0-11.314L2.93 2.93m14.14 14.14l-1.414-1.414" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    <!-- 主要内容区 -->
    <div class="popup-content">
      <!-- 录制控制区 -->
      <div class="recording-section" id="recordingSection">
        <div class="status-indicator" id="statusIndicator">
          <span class="status-dot"></span>
          <span class="status-text">Ready to record</span>
        </div>
        
        <button class="primary-btn" id="recordBtn">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/>
            <circle cx="10" cy="10" r="3" fill="currentColor"/>
          </svg>
          Start Recording
        </button>
        
        <p class="help-text">
          Click "Start Recording" and perform your actions. We'll capture each step automatically.
        </p>
      </div>

      <!-- 录制列表 -->
      <div class="recordings-section">
        <div class="section-header">
          <h2>Recent Recordings</h2>
          <button class="text-btn" id="viewAllBtn">View All</button>
        </div>
        
        <div class="recordings-list" id="recordingsList">
          <div class="empty-state">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
              <rect x="8" y="8" width="32" height="32" rx="4" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4"/>
              <path d="M18 24h12M24 18v12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <p>No recordings yet</p>
            <p class="text-muted">Start recording to create your first guide</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="popup-footer">
      <a href="#" class="footer-link" id="helpLink">Help</a>
      <span class="separator">•</span>
      <a href="#" class="footer-link" id="feedbackLink">Feedback</a>
      <span class="separator">•</span>
      <span class="version">v1.0.0</span>
    </div>
  </div>

  <!-- 设置面板 (初始隐藏) -->
  <div class="settings-panel" id="settingsPanel" style="display: none;">
    <div class="settings-header">
      <button class="icon-btn" id="backBtn">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M12 14l-4-4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <h2>Settings</h2>
    </div>
    
    <div class="settings-content">
      <div class="setting-item">
        <label>
          <input type="checkbox" id="autoCapture" checked>
          <span>Auto-capture screenshots</span>
        </label>
      </div>
      
      <div class="setting-item">
        <label>
          <input type="checkbox" id="highlightElements" checked>
          <span>Highlight clicked elements</span>
        </label>
      </div>
      
      <div class="setting-item">
        <label>
          <span>Capture delay (ms)</span>
          <input type="number" id="captureDelay" value="500" min="0" max="2000" step="100">
        </label>
      </div>
      
      <div class="setting-item">
        <label>
          <span>Highlight color</span>
          <input type="color" id="highlightColor" value="#ff5252">
        </label>
      </div>
      
      <div class="setting-item">
        <label>
          <span>Export format</span>
          <select id="exportFormat">
            <option value="markdown">Markdown</option>
            <option value="html">HTML</option>
            <option value="json">JSON</option>
          </select>
        </label>
      </div>
    </div>
    
    <div class="settings-footer">
      <button class="secondary-btn" id="resetSettingsBtn">Reset to Default</button>
      <button class="primary-btn" id="saveSettingsBtn">Save Settings</button>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>
